// 公共配置
const path = require('path');
const webpack = require('webpack');
// 清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 打包html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const WorkboxPlugin = require('workbox-webpack-plugin');
// css分离
// extract-text-webpack-plugin 暂时无法在 webpack 4.0+ 版本运
// npm install -D extract-text-webpack-plugin@next 即可解决
const extractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: [
      'lodash'
    ]
  },
  // 配置
  module: {
    rules: [
      // 加载css
      {
        test:/\.css$/,
        // css分离
        use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            // importLoaders: 1 引入的css也可以配合postcss加上前缀
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader',
          ],
          publicPath: '../',
        })
      },
      // 加载css图片
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // 清理 /dist 文件夹
    new CleanWebpackPlugin(['dist']),
    // 更改了我们的一个入口起点的名称
    new HtmlWebpackPlugin({
      title: 'Progressive Web Application',
      file: 'index.html', //打造单页面运用 最后运行的不是这个
      template: 'src/index.html'  //vue-cli放在跟目录下
    }),
    // new webpack.HashedModuleIdsPlugin(),
    // 全局变量
    new webpack.ProvidePlugin({
      _: 'lodash'
    }),
    // css 分离
    new extractTextPlugin('css/[name].[hash:8].css'),
    
  ],
  output: {
    // filename: '[name].bundle.js',
    filename: 'js/[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};